<template>
  <div class="retireList app-container">
    <el-form
      :inline="true"
      :model="queryParams"
      class="demo-form-inline"
      id="queryParams"
    >
      <el-form-item>
        <el-input
          v-model.trim="queryParams.employeeName"
          placeholder="请输入姓名"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-tree-select
          v-model="queryParams.dealOrgId"
          :data="department"
          :props="{
            value: 'id',
            label: 'label',
            children: 'children'
          }"
          :height="208"
          placeholder="办理退休单位"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="办理退休起"
          end-placeholder="办理退休止"
          style="width: 340px"
          value-format="YYYY-MM-DD"
          @change="handleDateRangeChange"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleQuery" icon="Search"
          >查询</el-button
        >
        <el-button type="default" @click="resetQuery" icon="Refresh"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row>
      <el-button @click="addRetire" type="primary">新增</el-button>
    </el-row>

    <el-table
      border
      stripe
      v-loading="loading"
      @selection-change="handleSelectionChange"
      :data="tableData"
      style="margin-top: 18px"
      @row-dblclick="handleClickProject"
    >
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column type="index" width="55" label="序号" align="center" />

      <el-table-column
        prop="employeeName"
        label="姓名"
        :show-overflow-tooltip="true"
        align="center"
      />
      <el-table-column
        prop="dealOrgName"
        label="办理退休手续单位全称"
        :show-overflow-tooltip="true"
        align="center"
      />
      <el-table-column
        prop="applicationDate"
        label="办理退休手续日期"
        :show-overflow-tooltip="true"
        align="center"
      />

      <el-table-column label="操作" width="160" fixed="right" align="center">
        <template v-slot="scope">
          <el-button type="primary" text @click="editRow(scope.row)"
            >编辑</el-button
          >
          <el-button type="primary" text @click="deleteRow(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="() => getList()"
    />
  </div>
</template>

<script setup name="RetireList">
import { getRetireeList, deleteRetiree } from '@/api/rsgl/retire'
import useCommonStore from '@/store/modules/common'
const { proxy } = getCurrentInstance()
const router = useRouter()

const commonStore = useCommonStore()
const queryParams = ref({ pageNum: 1, pageSize: 10 })
const total = ref(0)
const loading = ref(false)
const tableData = ref([])
const dateRange = ref()
const department = ref([])
async function init() {
  department.value = await commonStore.getCompanyData()
  handleQuery()
}

function handleDateRangeChange(val) {
  if (val && val.length) {
    queryParams.value.applicationDateBeginTime = val[0]
    queryParams.value.applicationDateEndTime = val[1]
  } else {
    queryParams.value.applicationDateBeginTime = null
    queryParams.value.applicationDateEndTime = null
  }
}

function handleQuery() {
  Object.keys(queryParams.value).forEach(key => {
    if (!queryParams.value[key]) {
      delete queryParams.value[key]
    }
  })
  getRetireeList(queryParams.value).then(res => {
    console.log(res)
    tableData.value = res.data.records
    total.value = res.data.total
  })
}
function resetQuery() {
  dateRange.value = []
  queryParams.value = { pageNum: 1, pageSize: 10 }
  handleQuery()
}

function addRetire() {
  router.push('/rsgl/rs/addRetirePerson')
}
function editRow(row) {
  router.push({ path: '/rsgl/rs/editRetirePerson', query: { id: row.id } })
}
function deleteRow(row) {
  proxy.$modal.confirm('是否确认删除该人员信息？').then(function () {
    deleteRetiree({ id: row.id }).then(() => {
      proxy.$modal.msgSuccess('删除成功')
      handleQuery()
    })
  })
}

function handleSelectionChange() {}
function handleClickProject(row) {
  console.log(row)
  router.push({
    path: '/rsgl/rs/retirePersonDetail',
    query: {
      id: row.id
    }
  })
}
init()
</script>

<style scoped lang="scss"></style>
